<template>
	<view class="bg">

		<!-- #ifdef H5 -->

		</u-navbar>
		<view @click="leftClick()" class="leftButton fixed-top ">
			<u-icon name="arrow-left" color="#FFF" size="24"></u-icon>
		</view>
		<!-- #endif -->

		<!-- #ifndef H5 -->

		<u-navbar :fixed="false" title="达人动态" :autoBack="true" bg-color="#fff">
		</u-navbar>
		<!-- #endif -->

		<view class="top">
			<view class="user">
				<view class="user_t">
					<view class="img">
						<image :src="detil.avatar" mode=""></image>
					</view>
					<view class="name">
						<text class="text1">{{detil.nickname}}</text>
						<view class="rate">
							<view class="rate-l">
								<text>评分</text>
							</view>
							<view class="rate-r">
								<text>{{detil.grade}}</text>
							</view>
						</view>
					</view>
					<view class="care">
						<view class="care-b" @click="interest(detil.id)" v-if="detil.is_collect==0">
							<text>关注</text>
						</view>
						<view class="care-b" @click="interest(detil.id)" v-if="detil.is_collect==1">
							<text>取关</text>
						</view>
					</view>
				</view>
				<view class="user_b">
					<text>{{detil.intro}}</text>
				</view>
			</view>
		</view>
		<view class="trends">
			<view class="trends-t">
				<text>动态</text>
				<view style="width: 40rpx;height: 4rpx; margin-top: 5rpx; background-color:#5406CD;"></view>
			</view>

			<view class="box" v-for="(item,index) in dynamic" @click.self="goTrends(item.id)">
				<view class="box-l">
					<text class="text2">{{item.day}}</text>
					<text class="text3">{{item.month}}月</text>
				</view>
				<view class="box-r" @click.self="goTrends(item.id)">
					<text @click="goTrends(item.id)">{{item.title}}</text>
					<view class=" flex-row-flex-start flex-wrap">
						<view @click="videoClick(item)" v-if="!(item.video
																			.length==0)" class="video-box">
							<view class="video-box1">
								<image :src="item.videoImage" mode="aspectFill"></image>
							</view>


							<view style="margin-top: -150rpx;" class="">
								<image src="/static/video.png"
									style="margin-left: 50rpx; width: 50rpx; height: 50rpx; margin-top: 50rpx;" mode="">
								</image>


							</view>



						</view>
						<image @click.stop="previewImageClick(item,index)" class="video-box" :src="it"
							v-for="(it,index) in item.images" mode="aspectFill"></image>
					</view>




				</view>
				<!-- 	<view  v-if="!(item.video
					.length==0)">
							<video class="video-box" :src="item.video"></video>
											
										</view>
					<view class="album" @click.self="goTrends(item.id)">
							<u-album :urls="item.images"></u-album>
					</view> -->

			</view>
		</view>

	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				detil: '',
				dynamic: '',
				demo: '',
			}
		},
		onLoad(id) {
			this.getDetil(id.id)
			this.id = id.id
		},
		methods: {
			leftClick() {
				uni.navigateBack()
			},
			previewImageClick(item, index) {

				uni.previewImage({
					urls: item.images,
					current: index

				})
			},
			videoClick(item) {
				uni.navigateTo({
					url: '/pages/my/vido?video=' + item.video
				})
			},
			getVideoPoster(url) {
				const that = this;
				let video = document.createElement('video')
				video.setAttribute('crossOrigin', 'anonymous') // 处理跨域，H5需后台支持，请求的视频资源响应投标需有Access-Control-Allow-Origin
				video.setAttribute('src', url)
				video.setAttribute('width', 400)
				video.setAttribute('height', 400)
				video.setAttribute('preload', 'auto')
				// uni.chooseVideo选择视频，当选用手机拍摄的视频时，地址是相对地址，如 _doc/uniapp_temp_1650594368317/camera/1650594390147.mp4
				// 可播放，但是loadeddata一直不执行，会触发error事件，视频加载失败
				// 应先转换成本地地址
				video.addEventListener('loadeddata', function() {
					console.log('视频第一帧加载完')
					let canvas = document.createElement('canvas')
					let width = video.width // canvas的尺寸和图片一样
					let height = video.height
					canvas.width = width
					canvas.height = height
					canvas.getContext('2d').drawImage(video, 0, 0, width, height) // 绘制canvas
					const dataURL = canvas.toDataURL('image/jpeg') // 转换为base64
					that.demo = dataURL;

					console.log('getVideoPoster-dataURL', dataURL.slice(0, 16))
					// return dataURL
				})

				video.addEventListener('error', err => {
					console.log('视频加载失败', err)
				})
			},
			getDetil(id) {
				this.$http.post('api/index/technician/detail', {
					tid: id

				}).then(res => {
					this.detil = res
					this.dynamic = res.dynamics

					console.log(this.dynamic, '88888');
				})
			},
			getDetil1(id) {
				this.$http.post('api/index/technician/detail', {
					tid: id

				}).then(res => {
					this.detil = res
					this.dynamic = res.dynamics

					this.dynamic.forEach(item => {
						if (item.video.length) {
							var url = item.video
							// this.getVideoPoster(item.video)
							const that = this;
							let video = document.createElement('video')
							video.setAttribute('crossOrigin',
								'anonymous') // 处理跨域，H5需后台支持，请求的视频资源响应投标需有Access-Control-Allow-Origin
							video.setAttribute('src', url)
							video.setAttribute('width', 400)
							video.setAttribute('height', 400)
							video.setAttribute('preload', 'auto')
							// uni.chooseVideo选择视频，当选用手机拍摄的视频时，地址是相对地址，如 _doc/uniapp_temp_1650594368317/camera/1650594390147.mp4
							// 可播放，但是loadeddata一直不执行，会触发error事件，视频加载失败
							// 应先转换成本地地址
							video.addEventListener('loadeddata', function() {
								console.log('视频第一帧加载完')
								let canvas = document.createElement('canvas')
								let width = video.width // canvas的尺寸和图片一样
								let height = video.height
								canvas.width = width
								canvas.height = height
								canvas.getContext('2d').drawImage(video, 0, 0, width,
									height) // 绘制canvas
								const dataURL = canvas.toDataURL('image/jpeg') // 转换为base64
								that.demo = dataURL;
								that.$set(item, 'videoImage', that.demo);
								console.log('getVideoPoster-dataURL', dataURL.slice(0, 16))
								// return dataURL
							})

							video.addEventListener('error', err => {
								console.log('视频加载失败', err)
							})


						}

					})
					console.log(this.dynamic, '88888');
				})
			},
			interest(id) {
				this.$http.post('api/collect/technician', {
					tid: id
				}).then(res => {
					console.log(res);
					uni.showToast({
						icon: 'none',
						title: res
					})

					this.getDetil(this.detil.id)

				})
			},

			goTrends(id) {
				uni.navigateTo({
					url: '/pages/my/trendsDetile?id=' + id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.video-box {
		width: 150rpx;
		height: 150rpx;
		margin-right: 14rpx;
		margin-top: 14rpx;
		border-radius: 8rpx;
		background-color: #f4f4f4;
	}

	.video-box1 {
		width: 100%;
		height: 100%;

		image {
			border-radius: 8rpx;
			width: 100%;
			height: 100%;
		}
	}

	// .video-box {
	// 	width: 350rpx;
	// 	height: 350rpx;
	// }

	.bg {
		background-color: #f5f5f5;

		.top {
			width: 100%;
			height: 380rpx;
			background-color: #A973FF;
			display: flex;
			align-items: flex-end;

			.user {
				width: 100%;
				height: 250rpx;
				background-color: #fff;
				border-radius: 20rpx 20rpx 0 0;
				padding: 10rpx 20rpx;
				box-sizing: border-box;

				.img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					/* background-color: #66ffcc; */
					margin-top: -45rpx;
					border: 1rpx solid #fff;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}

				}

				.user_t {
					width: 100%;
					height: 100rpx;
					display: flex;
					justify-content: space-between;

					.name {
						width: 65%;
						height: 100%;

						.text1 {
							font-size: 32rpx;
							font-weight: 700;
						}

						.rate {
							width: 120rpx;
							height: 35rpx;
							margin-top: 10rpx;
							border: 1rpx solid #FE903E;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 24rpx;
							border-radius: 5rpx;

							.rate-l {
								width: 50%;
								height: 100%;
								display: flex;
								justify-content: center;
								align-items: center;
								color: #FE903E;
							}

							.rate-r {
								width: 50%;
								height: 100%;
								display: flex;
								justify-content: center;
								align-items: center;
								color: #fff;
								background-color: #FE903E;
							}
						}
					}

					.care {
						display: flex;
						align-items: flex-end;
						font-size: 32rpx;

						.care-b {
							width: 100rpx;
							height: 50rpx;
							border: 1rpx solid #5406CD;
							border-radius: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 30rpx;
							color: #5406CD;
						}
					}
				}

				.user_b {
					width: 100%;
					font-size: 24rpx;
					margin-top: 20rpx;
					color: #666666;
				}
			}
		}

		.trends {
			width: 100%;
			/* min-height:200rpx; */
			background-color: #fff;
			margin-top: 10rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.trends-t {
				font-size: 30rpx;
				width: 60rpx;
				height: 50rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.box {
				width: 100%;
				min-height: 200rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 40rpx;
				border-bottom: 1rpx solid #f5f5f5;
				padding-bottom: 10rpx;

				.box-l {
					width: 20%;
					height: 50rpx;
					display: flex;
					justify-content: center;
					align-items: flex-end;

					.text2 {
						font-size: 38rpx;
						font-weight: 700;
						font-style: italic;
					}

					.text3 {
						font-size: 26rpx;
						margin-left: 20rpx;
						color: #333333;
					}
				}

				.box-r {
					width: 75%;
					height: 100%;
					margin-right: 10rpx;

					.album {
						width: 100%;
						min-height: 150rpx;
						display: flex;
						justify-content: flex-start;
						flex-wrap: wrap;
						margin-top: 10rpx;


					}

					.comment {
						width: 100%;
						height: 50rpx;
						margin-top: 10rpx;
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.text4 {
							font-size: 28rpx;
							color: #999;
						}
					}

				}
			}
		}

	}
</style>